<template>
<div class="show-on-top">
    <div class="flex">
        <div class="m">
            <logo class="logo"></logo>
            <el-menu :default-active="activeIndex" class="el-menu" mode="horizontal" @select="handleSelect" background-color="#0086FF" text-color="#eee" active-text-color="#fff">
                <template v-for="(item, index) in ShowTopMenu">
                    <el-menu-item v-if="showRouteArray.join(',').includes(item.name)" :key="item.name" :index="String(index + 1)" @click.native="openSide(item)">{{ item.meta.title }}</el-menu-item>
                </template>
            </el-menu>
        </div>

        <div class="user">
            <el-avatar @click="lookHead" shape="square" size="medium" :src="avatarUrl"></el-avatar>
            <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                    {{ localUser.UserIdentity }}:{{ localUser.userName }}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu class="dropdown" slot="dropdown">
                    <userInfo :form="userInfoForm">个人信息</userInfo>
                    <editHead :form="userInfoForm" @on-head-success="getHeadSuccess">修改头像</editHead>
                    <editPassword :form="userInfoForm">修改密码</editPassword>
                    <el-dropdown-item @click.native="clickToggle(SYS_TYPE=='SS1'?'SS2':'SS1')" divided>
                        {{SYS_TYPE=='SS1'?'切换到种植系统':'切换到渔业系统'}}</el-dropdown-item>
                    <el-dropdown-item @click.native="clearCache" divided>清除系统缓存</el-dropdown-item>
                    <el-dropdown-item @click.native="outLogin" divided>退出</el-dropdown-item>

                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</div>
</template>

<script>
import userInfo from "../userInfo/userInfo";
import editHead from "../editHead/editHead";
import editPassword from "../editPassword/editPassword";
import {
    mapState
} from "vuex";
export default {
    name: "ShowOnTop",
    props: {
        ShowTopMenu: {
            type: Array,
            default: () => [],
        },
    },
    components: {
        userInfo,
        editHead,
        editPassword,
    },
    data() {
        return {
            activeIndex: "1",
            userInfoForm: {},
            imageUrl: require("@/assets/head.jpeg"),
            SYS_TYPE: localStorage.getItem('SYS_TYPE')
        };
    },
    computed: {
        // showRouteArray() {
        //     return this.$store.state.User.router.menus
        // },
        avatarUrl() {
            let url = this.imageUrl;
            if (
                typeof this.userInfoForm.userHeadImgs != "undefined" &&
                this.userInfoForm.userHeadImgs instanceof Array
            ) {
                url = this.userInfoForm.userHeadImgs[0].imgUrl;
            }
            return url;
        },
        filterShowTopMenu() {
            let m = []
                m = this.ShowTopMenu.filter((item) => {
                    if (this.showRouteArray.join(',').indexOf(item.name) != -1) {
                        return item
                    }
                    // return item.meta.roles.includes(userInfo.userLevel);
                });
            return m
        },
        localUser() {
            let userInfo = {};
            if (localStorage.getItem("userInfo")) {
                userInfo = JSON.parse(localStorage.getItem("userInfo"));
            } else {
                userInfo = this.user;
            }
            return userInfo;
        },
        ...mapState({
            user: (state) => {
                return state.User.userInfo;
            },
            showRouteArray:(state)=>{
                return state.User.router.menus
            }
        }),
    },
    created() {
        this.getCurrentUserInfo();
    },
    methods: {
        clearCache() {
            localStorage.clear()
            location.href = "/"
        },
        clickToggle(type) {
            localStorage.setItem('SYS_TYPE', type)
            localStorage.removeItem('ShowMenu/setSideMenu')
            this.$store.dispatch('currentTask/removeAsyncCurrentTask')
                .then(() => {
                    this.$router.push({
                        name: 'Map'
                    });
                    setTimeout(() => {
                        location.reload()
                    }, 200)
                })
        },
        getHeadSuccess() {
            this.getCurrentUserInfo();
        },
        lookHead(res) {},
        handleClick() {},
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        openSide(item) {
            this.$store.commit("ShowMenu/setSideMenu", item);
            localStorage.setItem("ShowMenu/setSideMenu", JSON.stringify(item));
            this.$router.push({
                name: item.name,
            });
        },
        getCurrentUserInfo() {
            this.$axios.get("rbac/sysuser/getCurrentUserInfo").then((res) => {
                this.userInfoForm = res.data;
            });
        },
        outLogin() {
            this.$confirm("此操作将退出程序?", "提示", {
                    confirmButtonText: "退出",
                    cancelButtonText: "留下",
                    type: "warning",
                })
                .then(() => {
                    let outLogin = localStorage.getItem("outLogin") || {
                        name: "Login",
                    };
                    this.$store.dispatch("User/setAsyncLoginOut");
                    this.$router.push(outLogin);
                    this.$message({
                        type: "success",
                        message: "退出成功!",
                        callback: () => {
                            localStorage.clear();
                        },
                    });
                    location.reload()
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "取消退出",
                    });
                });
        },
    },
};
</script>

<style lang="scss">
.show-on-top {
    background: #0086ff;
    height: 100%;
    min-width: 1200px;

    .el-menu-item {
        padding: 0 25px;
    }

    .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo {
            width: 400px;
        }

        .m {
            align-items: center;
            display: flex;
            justify-content: space-between;
        }
    }

    .user {
        display: flex;
        line-height: 60px;
        padding-right: 15px;
        justify-content: flex-end;
        align-items: center;

        .el-avatar {
            margin-right: 15px;
        }

        .el-dropdown-link {
            cursor: pointer;
            color: #fff;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }
    }
}
</style>
